@import "mobile-commom.scss";
*{
    margin: 0;
    border: 0;
    // 头部{
    header{
     position: fixed; 
     background-color: white;
     @include box-page1(750,111);
    //  头部栏
     .column{
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         position: absolute;
         left: vw(23);
         top: vw(48);
         @include box-page1(704,57);
        //  返回按钮
        .back_btn{
            border-radius: vw(15);
           @include box-page1(123,57);
            button{
            outline-style: none;
            font-size: vw(26);
            border-radius: vw(15);
            @include box-page1(123,57);
            border: solid vw(2) #ff9344;
            a{
                text-decoration: none;
                color: #000000;
            }
        }
        }
        // 分类
        .clsasify_title{
            @include box-page1(52,27); 
            span{
                font-size: vw(26);
                color: #000000;
            }
        }
        // 切换城市
        .select_city{
            @include box-page1(159,56);
            background-color: brown;
            select{
                font-size: vw(26);
                outline-style: none;
                border: solid vw(2) #ff9344;
                @include box-page1(159,56);
             
            }
        }
     }
    }
    // 页面主体
    main{
       margin-top: vw(120);
       margin-bottom: vw(121);
        @include box-page1(750,1400);
        height: auto;
        overflow: scroll;
        // 栏目导航
        .column_bar{
            display: flex;
            justify-content: space-around;
             @include box-page1(750,184);
             a{  
                 display: flex;
                 height: vw(192);
                 display: flex;
                 flex-direction: column;
                 justify-content: space-between;
                 align-items: center;
                 text-decoration: none;
                 text-align: center;
                 color: #000000;
                 @include box-page1(148,184);
                 img{
                    @include box-page1(148,149);
                 }
                 p{
                     font-size: vw(26);
                    @include box-page1(52,26);
                 }
              }
            }
        // 换栏目按钮
        .wrap_btn_bar{
        display: flex;
        justify-content: center;
        align-items: center;

        @include box-page1(750,45);
        // 换栏目按钮容器
        .wrap_container{
            display: flex;
            justify-content: space-between;
            @include box-page1(94,18); 
            // 按钮
                .wrap_btn{
                    border-radius: 50%;
                    @include box-page1(19,18); 
                    background-color: #ffc9a1;
                    // a{
                    //     border-radius: 50%;
                    //     @include box-page1(19,18); 
                    //     background-color: #ffc9a1;
                    //     text-decoration: none;
                    // }
                }
                .wrap_btn:hover{
                background-color: #ff9344;
             }
          }
        }
        // 美食类栏目
        .food_column{
            display: flex;
            justify-content: center;
            @include box-page1(750,265);
            .column_container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
             @include box-page1(707,213); 
            //  顶部标题
             .column_title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                @include box-page1(707,42);
                // 顶部标题-左边
                .column_title_left{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    @include box-page1(154,42); 
                    
                img{
                    @include box-page1(54,42); 
                }
                p{
                    font-size: vw(30);
                    @include box-page1(90,30); 
                }
                }
                 // 顶部标题-右边边
                .column_title_right{
                    @include box-page1(80,24); 
                    a{
                        display: flex;
                        color: #000000;
                        text-decoration: none;
                        p{ 
                            font-size: vw(24);
                        }
                        i{
                            color: orange;
                            padding-left: vw(6);
                            font-size: vw(26);
                        }
                    }
                }
            }
            // 美食选择栏
            .pic{
                padding-top:vw(24) ;
            @include box-page1(133,133);
            img{
                @include box-page1(133,133);
            }
            }
            }
          
        }
        //体育类栏
        .sport_column{
            @extend.food_column;
        }
        //电影栏
        .movie_column{
            @extend.food_column;
        }
        // 唱歌类栏目
        .songs_column{
            @extend.food_column;
        }
     }
}
